{% extends '_base.html' %}

{% block style %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/list.css') }}">
<style>
    .no-result {
        border: 1px dashed rgba(0, 0, 0, 0.253);
        padding: 16px 0;
        font-size: 20px;
        color: #444;
        margin: 6px;
        text-align: center;
    }

    .result-title {
        border-bottom: 1px solid #2222221f;
        margin: 10px;
        font-size: 20px;
        margin-top: 30px;
        padding-bottom: 15px;
    }

    .key {
        /* color: #000; */
        background-color: rgba(199, 199, 199, 0.644) !important;
    }

    @media (max-width:420px) {
        main {
            padding: 10px;
        }

        .h1 {
            padding: 10px !important;
        }
    }
</style>
{% endblock %}

{% block title %}
Search
{% endblock %}

{% block nav_class %}top-show{% endblock %}
{% block header_content %}
<div class="container-flex">
    <div class="box">
        <div class="h1">关于“<span id="query"></span>”的搜索结果</div>
    </div>
</div>
{% endblock %}



{% block main_content %}
<div class="content">
    <div class="no-result">
        没有找到任何东西！
    </div>
    <div class="result-title"> 搜索到以下结果 </div>
    <div class="list">
        <div class="list-item">
            <div class="profile">
                <a href="#">
                    <img src="{{ url_for('static', filename='img/aaa.jpg') }}" alt="">
                </a>
            </div>
            <div class="text">
                <div class="title">
                    <a href="#">
                        title <span class="key">title</span> 2233
                    </a>
                </div>
                <div class="desc">
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum praesentium incidunt,
                    neque
                    quisquam assumenda animi au<span class="key">adipisicing</span>tem nostrum qua
                </div>
            </div>
            <hr>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) { return pair[1]; }
        }
        return '';
    }

    let query = document.querySelector('#query')
    q = decodeURI(getQueryVariable('q'))
    query.innerHTML = q

</script>
{% endblock %}